<template>
  <div>
    <slot :list="commentList" />
    <div v-if="isMore" @click="toggle" class="circle-more">
      {{ show ? '收起更多' : '展开更多' }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 是否显示删除
    showMore: {
      type: Boolean,
      default: false
    },
    maxLength: {
      type: Number,
      default: 0
    },
    totalLength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false
    }
  },
  computed: {
    isMore() {
      return this.showMore && this.maxLength > 0 && this.totalLength > this.maxLength
    },
    commentList() {
      if (this.isMore && !this.show) {
        return this.list.slice(0, this.maxLength)
      }
      return this.list
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

<style lang="scss" scoped>
.circle-more {
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  @include edu-color-primary;
  margin-left: 55px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
